<template>
  <div>
    <component
      v-for="(item, index) in fields"
      :is="item.component"
      :key="index"
      v-bind="item"
      v-model="item.vmodel"
    ></component>
    <button @click="enableHandle">编辑/文本,变化</button>
    <button @click="disabledHandle">禁用,变化</button>
  </div>
</template>

<script>
import variableFormat from "./field.js"
export default {
  data() {
    return {
      fields: [],
      enable: true,
      disabled: true,
    }
  },
  computed: {
    // 计算属性this只能相应data中的属性
    enableCom: {
      get() {
        return this.enable
      },
      set(v) {
        this.fields.forEach(e => (e.enable = v))
        this.enable = v
      },
    },
    disabledCom: {
      get() {
        return this.disabled
      },
      set(v) {
				this.fields.forEach(e => (e.disabled = v))
        this.disabled = v
      },
    },
  },
  methods: {
    enableHandle() {
      this.enableCom = !this.enableCom
    },
    disabledHandle() {
      this.disabledCom = !this.disabledCom
    },
  },
  created() {
    this.fields = variableFormat(this)
  },
}
</script>
